import React from "react";
import PropTypes from "prop-types";
import { Card, Row } from "antd";


export default class ProductCard extends React.Component {
  render() {
    const { width, height, img_src, onClick, name, id, price, img_height } = this.props;
    return (
      <Card
        hoverable
        style={{ width, height, boxShadow: "0 0 6px 6px #ddd" }}
        cover={<img style={{height: img_height}} alt={name} src={img_src} />}
        onClick={()=>onClick(id)}
      >
        <Card.Meta
          title={
              <Row type="flex" justify="space-between">
                <span>{name}</span>
                <span>￥{price}</span>
              </Row>
          }
        />
     </Card>
    )
  }
}

ProductCard.propTypes = {
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  img_src: PropTypes.string,
  onClick: PropTypes.func,
  name: PropTypes.string.isRequired,
  price: PropTypes.number.isRequired,
  id: PropTypes.number.isRequired,

  img_height: PropTypes.number
}

ProductCard.defaultProps = {
  width: "100%",
  height: "100%",
  img_src: "",
  onClick: (id) => console.log(id),

  img_height: 160
}